<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box property_box mb_20">
                <div class="all_box">
                    <div class="case">
                        <p class="money">{{ dataList.orderAllNumber }}</p>
                        <p class="desc">我的总订单数量</p>
                    </div>
                </div>
                <div class="info_box cl">
                    <div class="list">
                        <p class="desc">待支付</p>
                        <p><span class="money">{{ dataList.waitNumber }}</span></p>
                        <div class="btn pointer" v-show="dataList.waitNumber">去支付</div>
                        <p class="tips pointer_default"><span class="font_gray">剩余时间：</span>00:00:00</p>
                    </div>
                    <div class="list">
                        <p class="desc">审核中</p>
                        <p><span class="money">{{ dataList.approveNumber }}</span></p>
                        <a class="tips">查看</a>
                    </div>
                    <div class="list">
                        <p class="desc">挖矿中</p>
                        <p><span class="money">{{ dataList.onMiningNumber }}</span></p>
                        <a class="tips">查看</a>
                    </div>
                    <div class="list">
                        <p class="desc">已到期</p>
                        <p><span class="money">{{ dataList.expireNumber }}</span></p>
                        <a class="tips">查看</a>
                    </div>
                    <div class="list">
                        <p class="desc">质押中</p>
                        <p><span class="money">{{ dataList.onPledgeINumber }}</span></p>
                        <a class="tips">查看</a>
                    </div>
                </div>
            </div>
            <div class="case_box mb_20" style="padding: 0;">
                <div class="title cl">
                    <h2 class="f_l">
                        算力列表
                    </h2>
                </div>
                <div class="content gray_table text_c gray_thead pb_20">
                    <v-data-table :data='getOrderHashRateList' :currentData='dataOrderHashRate.records' :columns='columnsData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div class="dis_ib text_l" v-if="props.column.field === 'createTime'">
                                <span class="text">{{ $calcDate(props.content, 86400*3, [true]).split(' ')[0] }}<br />{{ $calcDate(props.content, 86400*3, [true]).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'cperiod'">
                                <span class="text">{{ props.content + ' 天'}}</span>
                            </div>
                            <div v-else-if="props.column.field === 'waitMoney'">
                                <span class="text">{{ '$ ' + Number(props.content).toFixed(2) }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'state'">
                                <span class="text" v-show="props.content === '0'">待支付</span>
                                <span class="text" v-show="props.content === '1'">支付成功</span>
                                <span class="text" v-show="props.content === '2'">已到期</span>
                            </div>
                            <div v-else-if="props.column.field === 'remark'">
                                <!-- <a href="javascript:void(0)" class="text font_green" v-show="props.content === '1'">审核中</a> -->
                                <span class="text font_green" v-show="props.content === '1'">审核中</span>
                                <span class="text" v-show="props.content === '2'">挖矿中</span>
                                <span class="text font_yellow" v-show="props.content === '3'">已驳回</span>
                            </div>
                            <div v-else-if="props.column.field === 'operate'">
                                <a href="javascript:void(0)" class="text" v-if="props.item.remark === '3'">查看退款</a>
                                <a href="javascript:void(0)" class="text" v-else>查看订单</a>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box pr_20">
                        <v-pagination @change="changeHashRatePage" :total="dataOrderHashRate.total" :show-total="showHashRateTotal" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
            <div class="case_box desc_box mb_20">
                <h2 class="bold">算力订单</h2>
                <div class="currency_box">
                    <div :class="['list']" v-for="item of currencysList" :key="item.id" @click="toggleCurrencys(item)">
                        <div :class="['img_box pointer', dataCurrencys.currency === item.currency ? 'select' : '']">
                            <img :class="['img']" :src="img_url_appSource + item.logo" />
                        </div>
                    </div>
                </div>
                <h2 class="bold mt_40">挖矿状态</h2>
                <div class="status_box">
                    <div class="all_box mb_30">
                        <img :class="['img']" :src="img_url_appSource + dataCurrencys.logo" />
                        <div class="text_box">
                            <p>有效总算力：<span class="font_theme">{{ dataCurrencys.normaleffective + ' TH/S' }}</span></p>
                            <p>累计总挖币产出：<span class="font_theme">{{ dataCurrencys.alloutput + ' ' + dataCurrencys.currency }}</span></p>
                        </div>
                    </div>
                    <div class="type_box">
                        <div class="list">
                            <p class="title font_green">正常</p>
                            <p class="text">{{ dataCurrencys.normaleffective + ' TH/S' }}</p>
                        </div>
                        <div class="list">
                            <p class="title font_yellow">故障</p>
                            <p class="text">{{ dataCurrencys.trouble + ' TH/S' }}</p>
                        </div>
                        <div class="list">
                            <p class="title font_theme">全部</p>
                            <p class="text">{{ dataCurrencys.allwork + ' TH/S' }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="case_box logs_box mb_20">
                <div class="title cl">
                    <h2 class="f_l">
                        订单列表
                    </h2>
                    <span class="f_r tips">
                        <span class="ml_30">待挖矿</span>
                        <span class="ml_30">挖矿中</span>
                        <span class="ml_30">故障中</span>
                        <span class="ml_30">已到期</span>
                    </span>
                </div>
                <div class="content gray_table text_c gray_thead gray_thead pb_20">
                    <v-data-table :data='getOrderList' :currentData='dataOrder.records' :columns='columnsOrderData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div class="text_l" style="padding-left: 20%;" v-if="props.column.field === 'coinName'">
                                <img class="img mr_10" :src="img_url_appSource + props.item.currency + '.png'" />
                                <span class="text">{{ props.content }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'doworkTime'">
                                <span class="text">
                                    {{ $getFormatMD(props.content) }} - <br />{{ $getFormatMD(props.item.expireTime) }}
                                </span>
                            </div>
                            <div v-else-if="props.column.field === 'dayYield'">
                                <span class="text">{{ Number(props.content * props.item.cperiod).toFixed(2) }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'state'">
                                <span class="text" v-show="props.content === '1'">算力部署中</span>
                                <span class="text" v-show="props.content === '2'">挖矿中</span>
                                <span class="text" v-show="props.content === '3'">冻结中</span>
                                <span class="text font_yellow" v-show="props.content === '4'">矿机故障</span>
                                <span class="text" v-show="props.content === '5'">挖矿中</span>
                            </div>
                            <div v-else-if="props.column.field === 'operate'">
                                <a href="javascript:void(0)" class="text">查看订单</a>
                            </div>
                            <div v-else-if="props.column.field === 'cperiod'">
                                <span class="text">{{ props.content + ' 天'}}</span>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box pr_20">
                        <v-pagination @change="changePage" :total="dataOrder.total" :show-total="showTotal" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCurrencys } from '@doapis/currency/currency.js';
    import { getOrderStatisticsInfo, getOrderHashRateList, getOrderList, getOrderHashRateStatus } from '@doapis/personal/orders.js';

    export default {
        name: "HashRateOrder",
        data: function() {
            return {
                dataList: {},
                dataOrderHashRate: {
                    current: 1,
                    records: [],
                    total: 0
                },
                dataOrder: {
                    current: 1,
                    records: [],
                    total: 0
                },
                dataCurrencys: {
                    currency: '',
                    logo: '',
                },
                currencysList: [],
                columnsData:[
                    { title:"订单号", field:'orderId', width: '11%' },
                    { title:"挖矿时间", field:'createTime', width: '11%' },
                    { title:"周期", field:'cperiod', width: '11%' },
                    { title:"算力数量", field:'power', width: '11%' },
                    { title:"购买份数", field:'cnumber', width: '11%' },
                    { title:"订单总金额", field:'waitMoney', width: '11%' },
                    { title:"支付状态", field:'state', width: '11%' },
                    { title:"订单状态", field:'remark', width: '11%' },
                    { title:"操作", field:'operate', width: '11%' }
                ],
                columnsOrderData:[
                    { title:"订单号", field:'orderNo', width: '11.11%' },
                    { title:"挖矿时间", field:'doworkTime', width: '11.11%' },
                    { title:"矿场矿机/算力编号", field:'pid', width: '16%' },
                    { title:"算力数量", field:'cpower', width: '11.11%' },
                    { title:"挖矿天数", field:'cperiod', width: '11.11%' },
                    { title:"累计产出", field:'dayYield', width: '11.11%' },
                    { title:"状态", field:'state', width: '11.11%' },
                    { title:"操作", field:'operate', width: '11.11%' }
                ],
                currencyList: [1,2,3,4,5,6],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function(params) {
                const that = this;
                return params ? $.$getPromiseNullData() : getOrderStatisticsInfo({ memberid: that.userDATA.memberid }).then(function(res) {
                    that.dataList = res.data;
                    that.getOrderHashRateList();
                    that.getOrderList();
                    that.getCurrencys();
                });
            },
            getOrderHashRateList: function(params) {
                const that = this;
                return params ? $.$getPromiseNullData() : getOrderHashRateList({
                    current: that.dataOrderHashRate.current,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    that.dataOrderHashRate = res.data;
                });
            },
            getOrderList: function(params) {
                const that = this;
                return params ? $.$getPromiseNullData() : getOrderList({
                    current: that.dataOrder.current,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    that.dataOrder = res.data;
                });
            },
            getCurrencys: function() {
                const that = this;
                getCurrencys({ boolhasAll: true }).then(function(res) {
                    let data = res.records;
                    const index = that.commissionType === 1 ? 0 : 1;
                    that.currencysList = data;

                    data = data[0];
                    that.toggleCurrencys({
                        currency: data.currency,
                        logo: data.logo
                    });
                });
            },
            getOrderHashRateStatus: function() {
                const that = this;
                getOrderHashRateStatus({
                    currency: that.dataCurrencys.currency,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    let data = Object.assign({}, that.dataCurrencys, res.data);
                    that.dataCurrencys = data;
                });
            },
            toggleCurrencys: function(params) {
                this.dataCurrencys.currency = params.currency;
                this.dataCurrencys.logo = params.logo;
                this.getOrderHashRateStatus();
            },
            showHashRateTotal: function(val) {
                return '全部' + this.dataOrder.total + '条';
            },
            changeHashRatePage: function(val) {
                this.dataOrderHashRate.current = val;
                this.getOrderHashRateList();
            },
            showTotal: function(val) {
                return '全部' + this.dataOrder.total + '条';
            },
            changePage: function(val) {
                this.dataOrder.current = val;
                this.getOrderList();
            },
            $getFormatMD: function(date) {
                return $.$getFormatMD(date, true);
            },
            $calcDate: $.$calcDate
        },
        mounted: function() {
            this.getData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            background-color: white;
            >.title{
                padding: 16px 20px;
                font-size: 13px;
                color: white;
                background: linear-gradient(225deg, #56ccf2 0%, #2948ff 100%)
            }
            >.content{
                font-size: 13px;
                .font_gray;
            }
        }
        .property_box{
            .flex_row_wrap;
            padding: 0;
            border:1px solid #DDD;
            font-size: 13px;
            font-weight: 700;
            .money{
                color: @color_orange;
            }
            .all_box{
                width: 30%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                .case{
                    padding: 30px 0;
                    font-size: 16px;
                    border-right: 1px solid #EDEDED;
                }
                .money{
                    font-size: 30px;
                }
            }
            .info_box{
                width: 70%;
                .flex_row_wrap;
                text-align: center;
                .list{
                    width: 33.33%;
                    float: left;
                    padding: 20px;
                    padding-left: 5%;
                    font-size: 16px;
                    box-sizing: border-box;
                    .desc{
                        margin-bottom: 10px;
                    }
                    .tips{
                        margin-top: 10px;
                        font-size: 14px;
                        font-weight: normal;
                        .font_theme;
                        cursor: pointer;
                    }
                    .btn{
                        display: inline-block;
                        margin-top: 10px;
                        padding: 4px 10px;
                        font-size: 10px;
                        font-weight: normal;
                        color: white;
                        border-radius: 34px;
                        .orange_linear_ellipsis_btn;
                    }
                }
            }
        }
        .desc_box{
            padding: 20px;
            .currency_box{
                .flex_row_wrap;
                padding: 40px 0 20px 0;
                .list{
                    width: 16.66%;
                    margin-bottom: 20px;
                    .img_box{
                        width: 70px;
                        margin: 0 auto;
                        line-height: 70px;
                        border-radius: 8px;
                        text-align: center;
                        border:2px solid white;
                        background-color: #F7F7F7;
                        &.select{
                            color: white;
                            border-color: @theme_color;
                            background-color: white;
                        }
                        .img{
                            width: 60%;
                            display: inline;
                            vertical-align: middle;
                        }
                    }
                }
            }
            .status_box{
                padding: 30px 30px 10px 30px;
                .all_box{
                    .flex_row_wrap;
                    align-items: center;
                    .img{
                        width: 40px;
                        height: 40px;
                        margin-right: 40px;
                    }
                    .text_box{
                        flex: 4;
                        font-weight: bold;
                        line-height: 24px;
                    }
                }
                .type_box{
                    padding: 10px 0;
                    .flex_row_wrap;
                    justify-content: center;
                    border-radius: 8px;
                    background-color: #F5F5F5;
                    .list{
                        width: 33.33%;
                        text-align: center;
                        .title{
                            font-size: 18px;
                        }
                        .text{
                            font-size: 13px;
                        }
                    }
                }
            }
        }
        .logs_box{
            >.title{
                .font_theme;
                background: white;
                .tips{
                    margin-top: 8px;
                    font-size: 10px;
                    color: #CCC;
                }
            }
            >.content{
            }
        }
    }
</style>
